import Vue from 'vue'
import Vuex from 'vuex'
import { Toast } from 'vant'
import { dologin } from './../api/user'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 需要管理的状态
    // 共享的状态
    // 缺点：页面刷新，状态管理器的状态会重置
    // 初始化状态管理器状态时 --- 配合本地存储
    isLogin: localStorage.getItem('isLogin') === 'true' || false
  },
  mutations: { // 唯一修改数据的方式就是显示的提交mutataion
    changeLoginState (state, data) {
      // state 代表的共享的状态
      // data 代表传递的参数
      state.isLogin = data
    }
  },
  actions: { // 用来处理异步操作
    // action 的参数
    loginAction (context, params) {
      // context 上下文对象
      // params 参数
      console.log(context) // getters state dispatch commit
      console.log(params)
      // 组件内部登录以后还有后续的操作
      return new Promise((resolve) => {
        dologin({ // 登录
          loginname: params.loginname,
          password: params.password
        }).then(res => {
          if (res.data.code === '10010') {
            Toast('登录账户不存在')
          } else if (res.data.code === '10011') {
            Toast('密码错误')
          } else {
            console.log(res.data)
            Toast('登录成功')
            // 保存信息到本地
            // token 后端校验用户登录的凭证
            // userid 知道是那一个用户
            localStorage.setItem('isLogin', true) // 前端校验登录的方式
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('userid', res.data.data.userid)
            // 修改状态管理器 --- 唯一修改状态的方式就是显示的提交mutations
            // actions中提交mutation 通过 context.commit
            context.commit('changeLoginState', true)
            // 这句话不在此处执行，应该回到组件中执行
            // this.$router.back()
            resolve()
          }
        })
      })
    }
  },
  modules: { // 分模块管理状态管理器
  }
})
